<!--
 * @Description: 小缘VIP
 * @Author: liu (1427179517@qq.com)
 * @Date: 2023-05-05 17:17:39
 * @LastEditors: liu (1427179517@qq.com)
 * @LastEditTime: 2023-05-09 13:32:52
 * @FilePath: \jiekuan-app\src\subPages\other\vip.vue
-->
<template>
  <div class="page">
    <div class="page-header">
      <u-navbar
        title="小缘VIP"
        :background="nav_background"
        title-color="#FCC307"
        back-icon-color="#fff"
        :height="60"
        :border-bottom="false"
      ></u-navbar>
    </div>
    <div class="page-content u-p-0">
      <div class="top">
        <div class="top_bg"></div>
      </div>
      <div class="title">VIP会员</div>
      <scroll-view scroll-x class="scroll_x_box">
        <div class="vip_item u-p-t-20" v-for="(item, index) in vip_list" :key="index">
          <div class="">{{ item.time }}</div>
          <div class="price u-m-t-20 u-m-b-20">￥{{ item.price }}</div>
          <s class="">{{ item.crossed_price }}元</s>
          <div class="u-m-t-20">≈{{ item.obversion }}元/天</div>
        </div>
      </scroll-view>
      <!-- 支付选择 -->
      <div class="u-flex all-center u-m-t-26">
        <div
          class="payment_method u-flex all-center"
          :class="{ payment_method_active: payment_current === item.type }"
          v-for="(item, index) in paymentList"
          :key="index"
          @click="handleClick({ type: 'payment', item: item })"
        >
          <image :src="item.img" class="img" alt="" />
          <span class="u-m-l-10 u-m-r-10">{{ item.name }}</span>
          <u-icon name="checkmark" color="#FCC307" size="25" v-if="payment_current === item.type"></u-icon>
        </div>
      </div>
      <!-- 支付按钮 -->
      <div class="u-flex all-center u-m-t-40">
        <button class="btn">立即开通VIP</button>
      </div>
      <!-- 权益 -->
      <div class="equity_box flex">
        <div class="column-3 u-m-t-50" v-for="(item, index) in equityList" :key="index">
          <image :src="item.img" class="icon" alt="" />
          <div class="u-m-t-20">{{ item.name }}</div>
          <div class="text">{{ item.text }}</div>
        </div>
      </div>
    </div>
    <div class="page-footer"></div>
  </div>
</template>

<script>
export default {
  name: '', // 页面名称
  components: {}, // 挂载组件
  props: {}, // 组件传值
  data() {
    return {
      nav_background: { backgroundImage: 'transparent' },
      vip_list: [
        { time: '两周', price: '99', crossed_price: '220', obversion: '8.5' },
        { time: '一个月', price: '99', crossed_price: '220', obversion: '8.5' },
        { time: '三个月', price: '99', crossed_price: '220', obversion: '8.5' },
        { time: '两周', price: '99', crossed_price: '220', obversion: '8.5' },
        { time: '一个月', price: '99', crossed_price: '220', obversion: '8.5' },
        { time: '三个月', price: '99', crossed_price: '220', obversion: '8.5' },
        { time: '两周', price: '99', crossed_price: '220', obversion: '8.5' },
        { time: '一个月', price: '99', crossed_price: '220', obversion: '8.5' },
        { time: '三个月', price: '99', crossed_price: '220', obversion: '8.5' },
      ], // 会员费用列表
      paymentList: [
        { name: '支付宝支付', img: '../../static/images/vip_zfb.png', type: 1 },
        { name: '微信支付', img: '../../static/images/vip_wx.png', type: 2 },
      ], // 支付方式列表
      payment_current: 1, // 支付方式
      equityList: [
        { img: '../../static/images/vip_locked.png', name: '解锁微信', text: '每天10个' },
        { img: '../../static/images/vip_chat.png', name: '无限畅聊', text: '每天10个' },
        { img: '../../static/images/vip_fire.png', name: '阅后即焚', text: '时间更长' },
        { img: '../../static/images/vip_crown.png', name: '尊贵身份', text: '专属标识' },
        { img: '../../static/images/vip_shield.png', name: '个人身份', text: '安全保密' },
        { img: '../../static/images/vip_diamond.png', name: '更多特权', text: '敬请期待' },
      ], // 权益列表
    }
  },
  computed: {}, // 计算机属性 类似与data概念
  watch: {}, // 监控data中数据变化
  created() {}, // 生命周期-创建完成(可以访问当前this实例)
  mounted() {}, // 生命周期-挂载完成(可以访问DOM元素)
  methods: {
    handleClick(options) {
      const { type, item } = options

      switch (type) {
        case 'payment':
          this.payment_current = item.type
          break
        default:
          break
      }
    },
  }, // 挂载一些方法
  onLoad(options) {
    console.log('onLoad', options, Date.now())
  }, // 生命周期回调—监听页面加载
  onShow() {}, // 生命周期回调—监听页面显示
  onReady() {}, // 生命周期回调—监听页面初次渲染完成
  onHide() {}, // 生命周期回调—监听页面隐藏
  onUnload() {}, // 生命周期回调—监听页面卸载
}
</script>

<style lang="scss" scoped>
.page {
  background-image: url('http://minio.tianhong.mobi/mall/xiaoq/home_bg.png');
  width: 100%;
  background-size: cover;
  background-repeat: no-repeat;
}
.top {
  padding: 20rpx 50rpx;
}
.top_bg {
  background-image: url(../../static/images/vip_VIP_bg.png);
  width: 100%;
  height: 360rpx;
  background-size: contain;
  background-repeat: no-repeat;
}
.title {
  font-size: 31rpx;
  font-family: Microsoft YaHei UI;
  font-weight: 400;
  color: #ffffff;
  padding: 5rpx 0 30rpx 35rpx;
}
.scroll_x_box {
  white-space: nowrap;
  width: 100%;
  padding-left: 35rpx;
}
.vip_item {
  width: 180rpx;
  height: 210rpx;
  background: #1b1551;
  border-radius: 15rpx;
  margin-right: 23rpx;
  display: inline-block;
  text-align: center;
  font-size: 25rpx;
  font-family: Microsoft YaHei UI;
  font-weight: 400;
  color: #ffffff;
  line-height: 1;
}
.vip_item:last-child {
  margin: 0;
}
.price {
  font-size: 38rpx;
  font-weight: bold;
}
.payment_method {
  width: 260rpx;
  height: 65rpx;
  background: #1b1551;
  border-radius: 33rpx;
  font-size: 25rpx;
  font-family: Microsoft YaHei UI;
  font-weight: 400;
  color: #c8c8c8;
  .img {
    width: 35rpx;
    height: 34rpx;
  }
}
.payment_method:first-child {
  margin-right: 28rpx;
}
.payment_method_active {
  border: 3rpx solid #fcc307;
  color: #fcc307;
}
.btn {
  width: 450rpx;
  height: 90rpx;
  background: #fcc307;
  border-radius: 45rpx;
  font-size: 33rpx;
  font-family: Microsoft YaHei UI;
  font-weight: 400;
  color: #ffffff;
  line-height: 90rpx;
}
.equity_box {
  padding: 10rpx 10rpx 45rpx;
  text-align: center;
  font-size: 28rpx;
  font-family: Microsoft YaHei UI;
  font-weight: 400;
  color: #fcc307;
  line-height: 38rpx;
  .icon {
    width: 90rpx;
    height: 90rpx;
  }
  .text {
    font-size: 21rpx;
  }
}
</style>
